<template>
  <view class="OEM">
    <view class="OEM-intro">
      <view class="OEM-intro__title"> OEM申请介绍 </view>
      <view class="OEM-intro__content">{{ intro }} </view>
    </view>
    <template v-if="!userInfo.distribution">
      <view class="OEM-form">
        <u-form
          :model="form"
          label-width="120"
          :label-style="{
            color: '#AAAAAA',
            'font-size': '30rpx',
            'letter-spacing': '2rpx',
          }"
          :rules="rules"
          ref="uFormOEM"
        >
          <u-form-item label="姓名" prop="user">
            <u-input v-model="form.user" input-align="right" />
          </u-form-item>
          <u-form-item label="电话" prop="mobile">
            <u-input
              v-model="form.mobile"
              class="input"
              input-align="right"
              maxlength="11"
            />
          </u-form-item>
          <u-form-item label="身份证" prop="id_number">
            <u-input
              v-model="form.id_number"
              class="input"
              input-align="right"
              maxlength="18"
            />
          </u-form-item>
          <u-form-item label="城市" :border-bottom="false" prop="city">
            <u-input v-model="form.city" class="input" input-align="right" />
          </u-form-item>
        </u-form>
      </view>
      <view class="OEM-btn" @click="submit"> 申请提交 </view>
    </template>
    <view class="OEM-share" v-else>
      <view class="tips">您已成功申请OEM!</view>
      <view class="name" v-if="userInfo.oem_name"
        >当前OEM分享名称：{{ userInfo.oem_name }}</view
      >
      <view class="bd">
        <u-field
          v-model="name"
          label="小程序分享标题："
          placeholder="请填写标题"
          label-width="240"
        >
        </u-field>
        <view class="bd-btn">
          <!-- <u-button size="mini" >提交</u-button> -->
          <view @click="nameSubmit" class="btn"> 提交 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { OEMApply, OEMintro, OEMname } from "@/utils/api";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      intro: "", // OEM介绍
      form: {
        user: "",
        mobile: "",
        id_number: "",
        city: "",
      },
      rules: {
        user: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入电话",
            trigger: "blur",
          },
          // 电话号码规则验证
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        id_number: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.idCard(value);
            },
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            message: "请输入城市",
            trigger: "blur",
          },
        ],
      },
      name: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  onReady() {
    !this.userInfo.distribution && this.$refs.uFormOEM.setRules(this.rules);
  },
  onLoad() {
    this.initIntro();
  },
  methods: {
    ...mapActions(["setAttr"]),
    // 获取OEM介绍
    initIntro() {
      OEMintro().then((resp) => {
        console.log("OEM介绍", resp);
        if (resp.code == 200) {
          this.intro = resp.data.text;
        }
      });
    },
    // 提交申请
    submit() {
      var that = this;
      const { user, mobile, city, id_number } = that.form;
      this.$refs.uFormOEM.validate((valid) => {
        if (valid) {
          OEMApply({
            user,
            mobile,
            city,
            id_number,
          }).then((resp) => {
            console.log("OEM申请", resp);
            if (resp.code == 200) {
              uni.showToast({
                icon: "none",
                title: resp.msg,
                success: () => {
                  // uni.showLoading();
                  // that.$refs.uFormOEM.resetFields();// 表单无法重置
                  that.form = {
                    user: "",
                    mobile: "",
                    id_number: "",
                    city: "",
                  };
                  // uni.hideLoading();
                },
              });
            }
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    // OEM 分享名称
    nameSubmit() {
      if (this.name) {
        OEMname({
          oem_name: this.name,
        }).then((resp) => {
          console.log("OEM名称提交", resp);
          if (resp.code == 200) {
            uni.showToast({
              icon: "none",
              title: "提交成功！",
            });
            this.setAttr({
              key: "oem_name",
              value: this.name,
            });
            this.name = "";
          }
        });
      } else {
        uni.showToast({
          icon: "none",
          title: "名称不能为空",
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}
.OEM {
  @include wrapper2;
  &-intro {
    background-color: #ffffff;
    border-radius: 12rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 25rpx;
    margin-bottom: 20rpx;
    &__title {
      position: relative;
      font-size: 30rpx;
      line-height: 80rpx;
      border-bottom: 1rpx solid #e9e9e9;
      &::before {
        content: "";
        position: absolute;
        width: 125rpx;
        height: 4rpx;
        background-color: #cd8544;
        bottom: -1rpx;
        left: 0;
      }
    }
    &__content {
      padding: 20rpx 0;
      font-size: 24rpx;
      min-height: 180rpx;
    }
  }
  &-form {
    background: #ffffff;
    border-radius: 12rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 10rpx;
    .input {
      text-align: right;
    }
  }
  &-btn {
    width: 100%;
    line-height: 80rpx;
    background: #ffffff;
    border-radius: 16rpx;
    text-align: center;
    font-size: 36rpx;
    margin-top: 50rpx;
  }
  &-share {
    .tips {
      text-align: center;
      line-height: 60rpx;
    }
    .bd {
      // background-color: #ffffff;
      &-btn {
        text-align: center;
        .btn {
          width: 100%;
          line-height: 80rpx;
          background: #ffffff;
          border-radius: 16rpx;
          text-align: center;
          font-size: 36rpx;
          margin-top: 50rpx;
        }
      }
    }
  }
}
</style>
